<template>
  <div
    :class="['tab-item',{current:cityInfo.cityId === cityId}]"
    @click="onTabClick(cityInfo)"
  >
    <span>{{cityInfo.cityName}}</span>
  </div>
</template>
              
<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "TabSub",
  props: {
    cityInfo: Object
  },
  computed: {
    ...mapState(["cityId"])
  },
  methods: {
    ...mapMutations(["selectCity"]),
    onTabClick(cityInfo) {
      this.selectCity(cityInfo);
    }
  },
  created() {}
};
</script>
              
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
@import "@/assets/styles/mixins.scss";
.tab-item {
  @include vh-center;
  flex: 1;
  height: 100%;
  font-size: 0.16rem;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;

  &.current {
    color: $defaultGreen;
    border-bottom: 2px solid $defaultGreen;
  }
}
</style>